<template>
    <m-card
        class="m-special"
        :title="title"
        :sub-title="subTitle"
        extra="查看更多"
        card-head-style="padding: 10rpx !important;border: none;"
        card-content-style="margin-left: -10rpx;margin-right: -10rpx;margin-bottom: -10rpx;background-color: #f8f8f8;"
    >
        <scroll-view :scroll-x="true" class="m-special-scroll-view">
            <m-product
                v-for="(p, index) in products"
                :title="p.title"
                :sub-title="p.subTitle"
                :tags="p.tags"
                :price="p.price"
                :image-url="p.imageUrl"
                class="scroll-view-item_H"
                :class="{ 'm-product-first': index == 0 }"
            ></m-product>
        </scroll-view>
    </m-card>
</template>

<script lang="ts" setup>
import MProduct from '@/components/business/MProduct.vue'
import MCard from '@/components/common/MCard.vue'
const props = defineProps({
    title: String,
    subTitle: String,
    products: Array<Product>
})
</script>

<style lang="scss" scoped>
.m-special-scroll-view {
    white-space: nowrap;
    width: 100%;
}
/* #ifdef H5 */
.m-special-scroll-view::v-deep .uni-scroll-view::-webkit-scrollbar {
    display: none;
}
/* #endif */
.scroll-view-item_H {
    display: inline-block;
    width: 300rpx;
}

.m-product-first {
    margin-left: 0rpx;
    padding-left: 10rpx;
}
</style>
